<template>
  <div class="container_box">
    <Breadcrumb :items="['权限管理', '岗位列表']" />
    <a-card title="岗位列表">
      <!-- 搜索 -->
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-input
            allow-clear
            :style="{ width: '320px' }"
             v-model="formModel.search"
            @change="fetchData"
            placeholder="请输入部门"
          />
        </a-col>
        <a-col class="flex_end" :span="12">
          <a-button type="primary" @click="handleCreate"> 新建 </a-button>
          <a-tooltip content="刷新">
            <div class="action_icon" @click="search"
              ><icon-refresh size="18"/></div>
          </a-tooltip>
        </a-col>
      </a-row>
      <!-- 表格 -->
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="formModel"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        :size="large"
        @page-change="onPageChange"
      >
        <template #index="{ rowIndex }">
           {{ rowIndex + 1 + (formModel.page - 1) * formModel.limit }}
        </template>
        <template #status="{ record }">
          <a-tag :color="record.status ? 'green' : 'red'">{{
            record.status===1 ? '开启' : '禁用'
          }}</a-tag>
        </template>
        <template #operations="{ record }">
          <a-button
            v-permission="['admin']"
            type="text"
            @click="handleCreate(record)"
            >编辑</a-button
          >
          <a-button
            v-permission="['admin']"
            status="danger"
            type="text"
            @click="handleDel(record)"
            >删除</a-button
          >
        </template>
      </a-table>
      <Pagination :total="total" :page='formModel.page' :limit='formModel.limit' @pagination="handlePagination" />
    </a-card>
    <createAndEditModal ref="createRef" @submitFrom="submitFrom" />
    <DeleteModal ref="delRef" @submitDel="submitDel" />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, onMounted } from 'vue';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
import { getPostList, createPost, updatePost, deletePost } from '@/api/list';
import createAndEditModal from './components/createAndEditModal.vue';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
const generateFormModel = () => {
  return {
    search: '',
    page: 1,
    limit: 10
  };
};
const { loading, setLoading } = useLoading(false);
const isCreate = ref(false);
const renderData = ref<any>([]);
const total = ref<any>(0);
const formModel = ref(generateFormModel());
const columns = reactive<TableColumnData[]>([
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    slotName: 'index',
  },
   {
    width: 220 ,
    title: '岗位名称',
    dataIndex: 'name',
    ellipsis: true,
    tooltip: true
  },
    {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    slotName: 'status',
  },
  {
    title: '创建人',
    dataIndex: 'created_by',
    ellipsis: true,
    tooltip: true,
    width: 170,
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    ellipsis: true,
    tooltip: true,
    width: 170,
  },
  {
    title: '描述',
    dataIndex: 'description',
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '操作',
    width: 120,
    dataIndex: 'operations',
    slotName: 'operations',
  },
]);
onMounted(() => {
 fetchData();
});
// 获取list
const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await getPostList(formModel.value);
    renderData.value = data.item;
    total.value = data.total;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};
// 分页
const handlePagination = (val:any) => {
  const { page, limit } = val
formModel.value.limit= Number(limit)
formModel.value.page= Number(page)
fetchData()
}
// 刷新
const search = () => {
  generateFormModel()
  fetchData()
};
// 重置
const reset = () => {
  formModel.value = generateFormModel();
};
const createRef = ref<any>(null);
const handleCreate = (val: any) => {
  isCreate.value = !val.id;
  createRef.value.handleClick(val);
};
const submitFrom = async (obj: any, id: any) => {
  if (isCreate.value) {
    try {
       await createPost(obj);
      Message.success('新增成功');
      fetchData();
    } finally {
      createRef.value.visible = false;
    }
  } else {
    try {
      await updatePost(obj, id);
      Message.success('编辑成功');
      fetchData();
    } finally {
      createRef.value.visible = false;
    }
  }
};
// 删除
const delRef = ref<any>(null);
const handleDel = (val: any) => {
  delRef.value.handleDelClick(val);
};
const submitDel = async (id: any) => {
  try {
    await deletePost(id);
    Message.success('删除成功');
    fetchData();
  } finally {
    delRef.value.visible = false;
  }
};
</script>

<script lang="ts">
export default {
  name: 'SearchTable',
};
</script>

<style scoped lang="less">
.container_box {
  padding: 0 20px 20px 20px;
}
.action_icon {
  margin-left: 12px;
  cursor: pointer;
}
:deep(.arco-btn-text, .arco-btn-text[type='button']) {
  padding: 0;
  margin-right: 8px;
  &:last-child {
    margin-right: 0;
  }
}
:deep(.arco-table) {
  overflow: auto;
  height: calc(100vh - 305px);
}
</style>
